<template>
  <view class="page">
    <!-- 顶部信息 -->
    <view class="header">
      <view class="collection-info">
        <template v-if="collection?.type === 'doll'">
          <image :src="collection.avatar" class="avatar" mode="aspectFill" />
          <text class="name">{{ collection.name }}的回忆</text>
        </template>
        <template v-else>
          <view class="notebook-icon" :style="{ background: collection?.color }">
            <wd-icon name="notebook" size="48rpx" color="#fff" />
          </view>
          <text class="name">{{ collection?.name }}</text>
        </template>
      </view>

      <!-- 搜索框 -->
      <view class="search-bar">
        <wd-icon name="search" size="32rpx" color="#94a3b8" />
        <input
          type="text"
          v-model="searchKey"
          placeholder="搜索回忆..."
          placeholder-class="placeholder"
        />
      </view>
    </view>

    <!-- 笔记列表 -->
    <view class="notes-list" v-if="!loading">
      <scroll-view
        :scroll-y="true"
        :refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
        @scrolltolower="loadMore"
        class="scroll-container"
      >
        <view
          class="note-item"
          v-for="note in filteredNotes"
          :key="note.id"
          @click="openNote(note.id)"
        >
          <view class="note-content">
            <text class="title">{{ note.title || '无标题' }}</text>
            <text class="preview">{{ note.content }}</text>
            <view class="meta">
              <text class="time">{{ formatTime(note.createTime) }}</text>
              <view class="media-info" v-if="hasMedia(note)">
                <wd-icon v-if="note.images?.length" name="image" size="24rpx" color="#94a3b8" />
                <text v-if="note.images?.length">{{ note.images.length }}</text>
                <wd-icon v-if="note.hasAudio" name="mic" size="24rpx" color="#94a3b8" />
                <wd-icon v-if="note.hasVideo" name="video" size="24rpx" color="#94a3b8" />
              </view>
            </view>
          </view>
          <view class="note-cover" v-if="note.images?.length">
            <image :src="note.images[0]" mode="aspectFill" />
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="!filteredNotes.length">
          <image src="/static/images/empty.png" mode="aspectFit" />
          <text>还没有回忆，创建一个吧</text>
        </view>

        <view class="loading-more" v-if="hasMore">加载中...</view>
      </scroll-view>
    </view>

    <!-- 骨架屏 -->
    <view class="skeleton" v-else>
      <view class="skeleton-item" v-for="i in 5" :key="i">
        <view class="skeleton-content">
          <view class="skeleton-title"></view>
          <view class="skeleton-text"></view>
          <view class="skeleton-text short"></view>
        </view>
        <view class="skeleton-cover"></view>
      </view>
    </view>

    <!-- 新建按钮 -->
    <view class="fab-btn" @click="createNote">
      <wd-icon name="plus" size="48rpx" color="#fff" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const loading = ref(true)
const hasMore = ref(true)
const searchKey = ref('')
const collection = ref<any>(null)
const notes = ref<any[]>([])
const isRefreshing = ref(false)

// 获取集合信息和笔记列表
onMounted(async () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const { id, type } = currentPage.$page.options

  loading.value = true
  try {
    // 模拟加载数据
    setTimeout(() => {
      collection.value = {
        id: Number(id),
        type,
        name: type === 'doll' ? '小布' : '生活笔记',
        avatar:
          type === 'doll' ? 'https://api.dicebear.com/7.x/adventurer/svg?seed=doll1' : undefined,
        color: type === 'doll' ? '#60a5fa' : 'linear-gradient(135deg, #60a5fa, #3b82f6)',
      }

      notes.value = [
        {
          id: 1,
          title: '今天的心情',
          content: '今天天气真好，心情也很不错...',
          createTime: new Date().toISOString(),
          images: ['https://picsum.photos/200'],
          hasAudio: true,
          hasVideo: false,
        },
        // 更多笔记...
      ]
    }, 1000)
  } finally {
    loading.value = false
  }
})

// 过滤后的笔记列表
const filteredNotes = computed(() => {
  if (!searchKey.value) return notes.value
  const key = searchKey.value.toLowerCase()
  return notes.value.filter(
    (note) => note.title?.toLowerCase().includes(key) || note.content?.toLowerCase().includes(key),
  )
})

// 格式化时间
const formatTime = (time: string) => {
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  // 小于1分钟
  if (diff < 60 * 1000) {
    return '刚刚'
  }

  // 小于1小时
  if (diff < 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 1000))}分钟前`
  }

  // 小于24小时
  if (diff < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
  }

  // 小于30天
  if (diff < 30 * 24 * 60 * 60 * 1000) {
    return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`
  }

  // 显示具体日期
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 检查是否包含媒体文件
const hasMedia = (note: any) => {
  return note.images?.length || note.hasAudio || note.hasVideo
}

// 加载更多
const loadMore = async () => {
  if (!hasMore.value) return
  // TODO: 实现加载更多逻辑
}

// 打开笔记
const openNote = (id: number) => {
  uni.navigateTo({
    url: `/pages/memory/editor?id=${id}&collectionId=${collection.value.id}`,
  })
}

// 创建新笔记
const createNote = () => {
  uni.navigateTo({
    url: `/pages/memory/editor?collectionId=${collection.value.id}&type=${collection.value.type}`,
  })
}

const onRefresh = async () => {
  isRefreshing.value = true
  try {
    // TODO: 刷新数据
    await loadNotes()
  } finally {
    isRefreshing.value = false
  }
}

const loadNotes = async () => {
  // TODO: 实现加载笔记列表的逻辑
}
</script>

<style lang="scss" scoped>
@import '../../styles/index';

.page {
  min-height: 100vh;
  background: #f8fafc;
}

.header {
  padding: 32rpx;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;

  .collection-info {
    display: flex;
    gap: 16rpx;
    align-items: center;
    margin-bottom: 24rpx;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
    }

    .notebook-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
    }

    .name {
      font-size: 32rpx;
      font-weight: 600;
      color: #0f172a;
    }
  }

  .search-bar {
    display: flex;
    gap: 12rpx;
    align-items: center;
    padding: 12rpx 24rpx;
    background: #f1f5f9;
    border-radius: 16rpx;

    input {
      flex: 1;
      height: 48rpx;
      font-size: 28rpx;
    }
  }
}

.notes-list {
  height: calc(100vh - 220rpx);

  .scroll-container {
    height: 100%;
  }

  .note-item {
    display: flex;
    gap: 24rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    background: #fff;
    border-radius: 16rpx;

    .note-content {
      flex: 1;

      .title {
        display: block;
        margin-bottom: 8rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #0f172a;
      }

      .preview {
        display: block;
        margin-bottom: 16rpx;
        font-size: 28rpx;
        color: #64748b;
        @include line-clamp(2);
      }

      .meta {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .time {
          font-size: 24rpx;
          color: #94a3b8;
        }

        .media-info {
          display: flex;
          gap: 8rpx;
          align-items: center;

          text {
            font-size: 24rpx;
            color: #94a3b8;
          }
        }
      }
    }

    .note-cover {
      width: 160rpx;
      height: 160rpx;
      overflow: hidden;
      border-radius: 12rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  align-items: center;
  padding: 120rpx 0;

  image {
    width: 240rpx;
    height: 240rpx;
  }

  text {
    font-size: 28rpx;
    color: #94a3b8;
  }
}

.skeleton {
  padding: 24rpx;

  .skeleton-item {
    display: flex;
    gap: 24rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    background: #fff;
    border-radius: 16rpx;

    .skeleton-content {
      flex: 1;

      .skeleton-title {
        width: 60%;
        height: 32rpx;
        margin-bottom: 16rpx;
        background: #e2e8f0;
        border-radius: 8rpx;
      }

      .skeleton-text {
        width: 100%;
        height: 24rpx;
        margin-bottom: 12rpx;
        background: #e2e8f0;
        border-radius: 6rpx;

        &.short {
          width: 40%;
        }
      }
    }

    .skeleton-cover {
      width: 160rpx;
      height: 160rpx;
      background: #e2e8f0;
      border-radius: 12rpx;
    }
  }
}

.fab-btn {
  position: fixed;
  right: 32rpx;
  bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 96rpx;
  background: #2563eb;
  border-radius: 50%;
  box-shadow: 0 4rpx 16rpx rgba(37, 99, 235, 0.2);

  &:active {
    transform: scale(0.95);
  }
}

.placeholder {
  color: #94a3b8;
}
</style>
